<template>
    <view class="page-container">
        <view class="container">
            <u-form v-if="!showWechat" ref="form" :label-width="100" label-align="center">
                <u-form-item label="角色">
                    <u-radio-group v-model="role">
                        <u-radio name="teacher">教师</u-radio>
                        <u-radio name="student">学生</u-radio>
                    </u-radio-group>
                </u-form-item>
                <u-form-item label="姓名">
                    <u-input v-model="name" :placeholder="formHolder.name" />
                </u-form-item>
                <u-form-item label="手机">
                    <u-input v-model="phone" type="number" :placeholder="formHolder.phone" />
                </u-form-item>
                <u-form-item>
                    <u-button type="primary" @click="handleBind" style="width:200px;">绑定</u-button>
                </u-form-item>
            </u-form>
            <view v-if="showWechat">
                <image
                    src="../../static/wechat.jpg"
                    style="margin: 0 auto; display: block;"
                    mode="widthFix"
                />
                <view class="text-center">长按扫码 关注公众号</view>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import { useUserStore } from '@/store'
import { http } from '@/utils/http'


const openid = getCurrentPages()[0].options.openid
const phone = ref('')
const name = ref('')
const role = ref('teacher')
const showWechat = ref(false)
const formHolder = computed(() => {
    return {
        name: role.value === 'teacher' ? '教师姓名' : '学生姓名',
        phone: role.value === 'teacher' ? '教师手机号' : '家长手机号'
    }
})
function handleBind() {
    const data = {
        name: name.value,
        phone: phone.value,
        role: role.value,
        openid
    }
    http.post('/api-mini/user/bind-wx', data).then(res => {
        const response = res as ApiResponse
        if(response.code === 200) {
            uni.showToast({
                title: response.msg,
                icon: 'success'
            })

            setTimeout(() => { uni.navigateBack({ delta: 1 }) }, 1500)    

            // if (role.value === 'teacher') 
            //     setTimeout(() => { uni.navigateBack({ delta: 1 }) }, 1500)    
            // else
            //     setTimeout(() => { showWechat.value = true }, 1500)
            
        } else {
            uni.showToast({
                title: response.msg,
                icon: 'none'
            })
        }
    })
}

</script>

<style lang="scss">
.page-container {
    background-color: #ddd;
}
.container {
    padding: 10px;
    margin-top: 150px;
    background:#fff;
    border:1px solid #ccc;
    border-radius: 10px;
}
</style>